import React, { useRef, useEffect } from 'react';

const Index = () => {
  const xmlContent = `<div><h2>面朝大海，春暖花开</h2><p style="font-size: 12px; padding-left: 70px">现代·海子</p><p>从明天起，做一个幸福的人</p><p>喂马、劈柴，周游世界</p>从明天起，关心粮食和蔬菜<p><p>我有一所房子，面朝大海，春暖花开</p><p>从明天起，和每一个亲人通信</p><p>告诉他们我的幸福...</p><button>按钮</button></div>`;
  
  const containerRef = useRef<HTMLDivElement>(null);
  
  useEffect(() => {
    const handleClick = (event: any) => {
      if (event.target.tagName === 'BUTTON') {
        if (event.target.textContent === '按钮') {
          alert('我是按钮');
        }
      }
    };
    
    const container = containerRef.current;
    if (container) {
      container.addEventListener('click', handleClick);
    }
    
    return () => {
      if (container) {
        container.removeEventListener('click', handleClick);
      }
    };
  }, []);
  
  return <div ref={containerRef} dangerouslySetInnerHTML={{ __html: xmlContent }} />;
};

export default Index;
